<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/taglibs.jsp"%>
<bsl:layout-render name="/WEB-INF/jsp/common/layout.jsp">
<bsl:layout-component name="html-head">
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/jquery.fileupload-ui.css" />
	<link rel="stylesheet" href="<%=request.getContextPath()%>/css/jqtransform.css" type="text/css" media="all" />
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/validation-horiz.css" />
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/viewDetails.css" />
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/viewCommentList.css" />
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/pub_area.css" />
	<script charset="utf-8" src="<%=request.getContextPath()%>/editor/kindeditor-min.js"></script>
	<script charset="utf-8" src="<%=request.getContextPath()%>/editor/lang/zh_CN.js"></script>
	
	<script src="<%=request.getContextPath()%>/js/jquery.ui.widget.js"></script>
	<script src="<%=request.getContextPath()%>/js/tmpl.js"></script>
	<script src="<%=request.getContextPath()%>/js/load-image.js"></script>
	<script src="<%=request.getContextPath()%>/js/canvas-to-blob.min.js"></script>
	<script src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script>
	<script src="<%=request.getContextPath()%>/js/bootstrap-image-gallery.js"></script>
	<script src="<%=request.getContextPath()%>/js/jquery.iframe-transport.js"></script>
	<!-- The basic File Upload plugin -->
	<script src="<%=request.getContextPath()%>/js/jquery.fileupload.js"></script>
	<!-- The File Upload file processing plugin -->
	<script src="<%=request.getContextPath()%>/js/jquery.fileupload-fp.js"></script>
	<!-- The File Upload user interface plugin -->
	<script src="<%=request.getContextPath()%>/js/jquery.fileupload-ui.js"></script>
	<script src="<%=request.getContextPath()%>/js/locale.js"></script>
	<script src="<%=request.getContextPath()%>/js/upload.main.js"></script>
	<script src="<%=request.getContextPath()%>/js/jquery.jqtransform.js"></script>
	<script src="<%=request.getContextPath()%>/js/validation.js" type="text/javascript"></script>
	<script>
	var editors = [];
	$(function(){
		 var options1 = {navigation: 'hover',direction:  'left'};
		 var options2 = {navigation: 'hover',direction:  'right'};
	     $('.ppy1').popeye(options2);
	     $('.ppy2').popeye(options1);
		var editorList = $("textarea[name='comment.content']");
		$.each(editorList, function(i, val) {
			KindEditor.ready(function(K) {
			editors[i] =	K.create(val, {
				
							resizeType : 1,
							allowPreviewEmoticons : false,
							allowImageUpload : true,
							filePostName:'kindImgFile',
							uploadJson:'harry/fileUpload',
							afterUpload : function(self, data) {
				                  addCommentPhotos(data.id, val.parentNode.id);
		                    },
		                    afterChange : function() {
			   				     
			  				      var limitNum = 2000;  //设定限制字数
			  				      var pattern = '还可以输入' + limitNum + '字';
			  				      $('#' + val.parentNode.id +'1').html(pattern); //输入显示
			  				      if(this.count('text') > limitNum) {
			  				       pattern = ('字数超过限制，请适当删除部分内容');
			  				       //超过字数限制自动截取
			  				       var strValue = editor.text();
			  				       strValue = strValue.substring(0,limitNum);
			  				       editor.text(strValue);      
			  				       } else {
			  				       //计算剩余字数
			  				       var result = limitNum - this.count('text');
			  				       pattern = '还可以输入' +  result + '字';
			  				       }
			  				       $('#' + val.parentNode.id +'1').html(pattern); //输入显示
			  				      ////////
			  				     } ,
							items : [
								 'emoticons', '|', 'image']
						});
			});
		});
	});

	function sync() {
		$.each(editors, function(i, editor) {
			editor.sync("comment.content");
		});
	}

	function articleComment(form)
	{
		alert("a");
		var a = LiveValidation.massValidate( [ commentTitleVerify] );
		 var invalidSize = $('.LV_invalid_field').size();
		 if(invalidSize>0){
			 return;
		 }
		sync();
		form.submit();
	}

	function replyComment(form) {
		sync();
		form.submit();
		
	}

	var discussTitleVerify;
	var commentTitleVerify;
	 $(function(){
		 commentTitleVerify = new LiveValidation('commentTitle' , {onlyOnBlur: true});
		 commentTitleVerify.add(Validate.Presence, { failureMessage: "请写一个标题"} );
		 commentTitleVerify.add( Validate.Length, { minimum: 1,maximum:30, tooShortMessage:"标题不少于1字", tooLongMessage:"标题不超过30字" } );
	});
	</script>
	
</bsl:layout-component>
<bsl:layout-component name="title">
${article.title}
</bsl:layout-component>
<bsl:layout-component name="content" >
<c:set var="contextPath" value="<%=request.getContextPath()%>"></c:set>
<div class="details_core">
<div class="details_main">
	<div class="main_header">
		 
		 <div class="header_title">
		 	<h2>${article.title}</h2>
		 </div>
		
	<div style="clear: both"></div>
		
	
	<div class="article_meta"> 
		 <div class="user_rate" style="float: left">
		    <div class="big_rate_bak">
		        <b rate="2">&nbsp;</b>
		        <b rate="4">&nbsp;</b>
		        <b rate="6">&nbsp;</b>
		        <b rate="8">&nbsp;</b>
		        <b rate="10">&nbsp;</b>
		        <div id="big_rate_up_a${article.id}" class="big_rate_up" style="width: 123.20000000000002px; display: block; height: 26px; " ></div>
		    </div>
		   <p><span id="s" class="s">${article.rateObject.integerPart}</span><span id="g" class="g">.${article.rateObject.decimalPart}</span></p>
		</div>
		<script type="text/javascript">
		 showRate('a${article.id}', '${article.rateObject.integerPart}', '${article.rateObject.decimalPart}');
		</script>
		<div class="comment_num">
			(<a href="${contextPath}/viewCommentList?article.id=${article.id}" title="">&nbsp;${article.commentNum}&nbsp;人评论</a>)
		</div>
		
		<div class="meta_tails">
			<jsp:include page="../common/timeFormat.jsp">
							<jsp:param value="${article.createTime.time}" name="time"/>
							<jsp:param value="${article.createTime.year }" name="year"/>
							<jsp:param value="${article.createTime.month }" name="month"/>
							<jsp:param value="${article.createTime.day}" name="day"/>
							<jsp:param value="${article.createTime.hours}" name="hours"/>
							<jsp:param value="${article.createTime.minutes}" name="minutes"/>
							<jsp:param value="${article.createTime.date}" name="date"/>
						</jsp:include>
			&nbsp;|&nbsp;<a target="_blank" href="${contextPath }/viewCustomerInfo?customer.id=${article.createByUser.id}" >${article.createByUser.userName}</a>
			&nbsp;|&nbsp;<a href="${contextPath}/viewDiscussList?article.id=${article.id}" >进入贴吧</a>
			&nbsp;|&nbsp;<a href="${contextPath}/editArticle?article.id=${article.id}" >编辑</a>
		</div>
			
	</div>	
	 
</div>

<div class="details_content">
<c:if test="${not empty article.album.photos}">
<div class="ppy2">
	<ul class="ppy-imglist">
		<c:forEach items="${article.album.photos}" var="photo">
			<li>
                  <a href="${contextPath}${photo.thumbnailLarge}">
                      <img src="${contextPath}${photo.thumbnailMiddle}" alt="">
                  </a>
                  <c:if test="${not empty photo.description}">
                  	<span class="ppy-extcaption">
                      <strong>${photo.description}</strong>
                  	</span>
                  </c:if>
                  
              </li>
		</c:forEach>
              
      </ul>
        <div class="ppy-outer">
                <div style="width:288; height:388;background-image: url(&quot;${contextPath}${article.album.coverPhoto.thumbnailMiddle}&quot;);" class="ppy-stage">
                    <div class="ppy-counter">
                        <strong class="ppy-current">1</strong> / <strong class="ppy-total">9</strong> 
                    </div>
               	</div>
                <div class="ppy-nav">
                        <a class="ppy-next" title="下一张">下一张</a>
                        <a class="ppy-prev" title="上一张">上一张</a>
                </div>
       </div>
       <div style="visibility: hidden; height: 0px; overflow: hidden;" class="ppy-caption">
                <span class="ppy-text">
                        
                </span>
       </div>
 </div>
</c:if>
 <div class="details_content_txt" >
		${article.articleContent.content}
	</div>
</div>
<div class="content_tails">
	<a href="${contextPath}/viewDiscussList?article.id=${article.id}" >进入贴吧</a>
</div>
</div>
	<div style="clear: both"></div>
  <div class="user_part">
	<div style="text-align: left"><button type="button" class="btn btn-danger" onclick="switchReply('pub_area','${user.userName}', '${contextPath}/viewLogin')">发表评论</button></div>

	 	<jsp:include page="commentReply.jsp">
	 		<jsp:param value="${article}" name="article"/>
	 		<jsp:param value="${userComment}" name="userComment"/>
	 	</jsp:include>
           
           <div style="clear: both"></div>
          	 <div class="commListTitle" ><a href="${contextPath}/viewCommentList?article.id=${article.id}">查看全部...</a>(全部 ${article.commentNum} 条评论贴)</div>
            
              	<jsp:include page="commentList.jsp">
              		<jsp:param value="${starComments}" name="starComments"/>
              		<jsp:param value="${article}" name="article"/>
              	</jsp:include>

 </div>
 </div>
</bsl:layout-component>
</bsl:layout-render>